// 创建一个弹框
import { ElDialog, ElButton, ElInput } from 'element-plus'
import { createVNode, defineComponent, reactive, render } from 'vue'

const DialogComponent = defineComponent({
    props: {
        option: { type: Object }
    },

    setup(props, ctx) {

        const state = reactive({
            option: props.option, // 用户传过来的值
            isShow: false // 弹框默认值false
        })

        // 暴露方法
        ctx.expose({
            showDialog(option) {
                // 每次打开弹框时，更新一下option
                state.option = option
                state.isShow = true
            }
        })

        // 取消按钮事件
        const onCancel = () => {
            state.isShow = false
        }

        // 确认按钮事件
        const onConfirm = () => {
            if (state.option.confirm) {
                state.isShow = false
                state.option.confirm(state.option.content)
            }
        }

        return () => {
            return <ElDialog v-model={state.isShow} title={state.option.title}>
                {{
                    default: () => {
                        return <ElInput type="textarea" rows={10} v-model={state.option.content}></ElInput>
                    },
                    footer: () => state.option.footer && <div>
                        <ElButton onClick={onCancel}>取消</ElButton>
                        <ElButton type="primary" onClick={onConfirm}>确定</ElButton>
                    </div>
                }}
            </ElDialog>
        }
    }
})

let vm;
// 创建方法，执行本方法来操作弹框
export function $Dialog(option) {
    // 如果虚拟dom存在就不需要在创建
    if (!vm) {
        // 创建一个div
        const el = document.createElement("div")
        // 创建一个虚拟dom
        vm = createVNode(DialogComponent, { option })
        // 把节点渲染到dom中
        // 把真是dom渲染到页面中
        document.body.appendChild((render(vm, el), el))
    }
    // 在这可以拿到暴露的方法
    const { showDialog } = vm.component.exposed
    showDialog(option)
}